<template>
  <div class="app-container">
    <!-- 字典列表 -->
    <a-row :gutter="10">
      <a-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px" >
        <a-card class="box-card">
          <!--工具栏-->
          <div class="head-container">
            <a-button v-permission="permission.add" class="filter-item" type="primary" icon="plus" @click="crudCreate" >新增</a-button>
          </div>
          <!--表格渲染-->
          <a-table
            size="middle"
            row-key="id"
            :columns="columns"
            :data-source="tableData"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            :customRow="customRow"
            @change="handleTableChange"
          >
            <span slot="action" slot-scope="text, record" >
              <udOperation
                :data="record"
                :permission="permission"
                :disabled-dle="record.id === 1"
                @crudUpdate="crudUpdate"
                @crudDelete="crudDelete(record.id)"
              />
            </span>
          </a-table>
        </a-card>
      </a-col>
      <!-- 字典详情列表 -->
      <a-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13" >
        <dict-detail
          ref="dictDetail"
          :permission="permission"
        />
      </a-col>
    </a-row>
    <!--表单组件-->
    <dict-update-modal ref="updateForm" @closeModal="closeModal" />
  </div>
</template>

<script>
import udOperation from '@crud/UD.operation';

import ApiTree from '@/api/system/dict';
import { Slime, crud } from '@/mixins/slime';

import DictDetail from './dictDetail';
import DictUpdateModal from './dictUpdateModal';


export default {
  name: 'Dict',
  components: { udOperation, DictDetail, DictUpdateModal },
  mixins: [Slime],
  data() {
    return {
      dictPid:null,
      // table
      tableData: [],
      columns: [
        {
          title: '名称',
          align: 'left',
          dataIndex: 'name',
        },
        {
          title: '描述',
          align: 'left',
          dataIndex: 'value',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      permission: {
        add: ['admin', 'dict:add'],
        edit: ['admin', 'dict:edit'],
        del: ['admin', 'dict:del'],
      },
    };
  },
  created() {
    crud(ApiTree)
    this.loadData();
  },
  methods: {
    // 加载表格数据
    loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      ApiTree.getDictDetail(0).then((res) => {
        let tableData = res.result;
        this.tableData = tableData;
      });
    },
    // 点击单行
    customRow(record){
      return {
        on: { 
          // 事件点击行
          click: (event) => {
            if (record) {
              this.$refs.dictDetail.dictPid = record.id;
              this.dictPid = record.id
              this.$refs.dictDetail.loadData();
              // this.$refs.dictDetail.crud.toQuery()
            }
          },       
        },
      };
    },
  },
};
</script>

<style scoped>
</style>
